<script>
export default {
  name: "headerTitle",
  data() {
    return {
      statusBarHeight: 0
    }
  },
  props: {
    // 头部标签
    title: {
      type: String,
      default: ''
    },
    // 是否显示返回按钮
    isDisplayBack: {
      type: Boolean,
      default: false
    },
    // 是否触发点击事件
    isClick: {
      type: Boolean,
      default: false
    },
    isFixed: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: 'transparent'
    },
    zIndex: {
      type: Number,
      default: 1
    },
    isShowHome: {
      type: Boolean,
      default: false
    }
  },
  created() {
    //  获取顶部安全区域
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  },
  methods: {
    // 获取元素的高度
    getPageHeight() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.headerTitle').boundingClientRect(data => {
        this.$emit('getPageHeight', data.height)
      }).exec()
    },
    backNav() {
      uni.navigateBack()
    },
    headerClick() {
      if (!!this.isClick) {
        this.$emit('headerClick')
      }
    },
    goToHome() {
      if (!this.isShowHome) {
        return
      }
      this.$nav.swichNav('/pages/family/index')
    }
  }
}
</script>

<template>
  <view class="headerTitle allRowCenter" :class="{
    fixed:isFixed
  }" :style="{
    paddingTop:`calc(${statusBarHeight}px + 10rpx)`,
    background: background,
    zIndex:zIndex,
  }">
    <view class="headerTitle_content allRowCenter" @click.stop="headerClick">
      <image v-if="isDisplayBack" src="https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/left5.png?x-oss-process=image/resize,w_44,h_44"
             class="headerTitle_image" @click.stop="backNav"/>
      <view class="headerTitle_content_home row items-center" v-if="!!isShowHome" @click.stop="goToHome">
        <image class="headerTitle_content_home_image" src="/static/shiqin-images/home.png"></image>
        <text class="headerTitle_content_home_text ml-4">进入首页</text>
      </view>
      <text class="headerTitle_text">
        {{ title }}
      </text>
      <slot></slot>
    </view>
  </view>
</template>

<style scoped lang="scss">
.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.headerTitle {
  width: 750rpx;
  padding-bottom: 25rpx;

  .headerTitle_content {
    width: 750rpx;
    //min-height: 48rpx;
    position: relative;

    .headerTitle_image {
      width: 36rpx;
      height: 36rpx;
      position: absolute;
      top: 50%;
      left: 23rpx;
      transform: translateY(-50%);
    }

    .headerTitle_content_home {
      position: absolute;
      left: 79rpx;
      top: 50%;
      transform: translateY(-50%);

      .headerTitle_content_home_image {
        width: 36rpx;
        height: 36rpx;
      }

      .headerTitle_content_home_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 22rpx;
        color: #FF4206;
      }
    }

    .headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
    }
  }
}
</style>